<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery模拟IOS开关按钮代码</title>
<script src="js/jquery.js"></script>
<script src="js/lc_switch.js" type="text/javascript"></script>
<link rel="stylesheet" href="lc_switch.css">
<style type="text/css">
body * {
	font-family: Arial, Helvetica, sans-serif;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}
h1 {
	margin-bottom: 10px;
	padding-left: 35px;
}
a {
	color: #888;
	text-decoration: none;
}
small {
	font-size: 13px;
	font-weight: normal;
	padding-left: 10px;
}
#first_div {
	width: 90%;
	max-width: 600px;
	min-width: 340px;
	margin: 50px auto 0;
	color: #444;
}
#second_div {
	width: 90%;
	max-width: 600px;
	min-width: 340px;
	margin: 50px auto 0;
	background: #f3f3f3;
	border: 6px solid #eaeaea;
	padding: 20px 40px 40px;
	text-align: center;
	border-radius: 2px;
}
#third_div {
	width: 90%;
	max-width: 600px;
	min-width: 340px;
	margin: 10px auto 0;
}
</style>
</head>

<body>
<div id="first_div">
  <h1>jQuery LC Switch Plugin Demos<small></small></h1>
</div>
<div id="second_div">
  <form>
    <div style="float: left; width: 50%;">
      <p style="padding-bottom: 13px;"><em>Checkbox</em></p>
      <p>
        <input type="checkbox" name="check-1" value="4" class="lcs_check" />
      </p>
      <p>
        <input type="checkbox" name="check-2" value="5" class="lcs_check" disabled="disabled" autocomplete="off" />
      </p>
      <p>
        <input type="checkbox" name="check-3" value="6" class="lcs_check lcs_tt1" checked="checked" autocomplete="off" />
      </p>
    </div>
    <div style="float: right; width: 50%;">
      <p style="padding-bottom: 13px;"><em>Radio</em></p>
      <p>
        <input type="radio" name="radio-1" value="1" class="lcs_check " autocomplete="off" />
      </p>
      <p>
        <input type="radio" name="radio-1" value="2" class="lcs_check " disabled="disabled"  />
      </p>
      <p>
        <input type="radio" name="radio-1" value="3" class="lcs_check " checked="checked"  />
      </p>
    </div>
  </form>
  <div style=" clear: both;"></div>
</div>
<div id="third_div"> <em style="color: #777; font-size: 14px;">Check your browser console to see triggered events</em> </div>
<p></p>
<script type="text/javascript">
$(document).ready(function(e) {
	$('input').lc_switch();
	// triggered each time a field changes status
	$('body').delegate('.lcs_check', 'lcs-statuschange', function() {
		var status = ($(this).is(':checked')) ? 'checked' : 'unchecked';
		console.log('field changed status: '+ status );
	});

	// triggered each time a field is checked
	$('body').delegate('.lcs_check', 'lcs-on', function() {
		console.log('field is checked');
	});
	
	
	// triggered each time a is unchecked
	$('body').delegate('.lcs_check', 'lcs-off', function() {
		console.log('field is unchecked');
	});
});
</script> 
</body>
</html>
